<template>
  <div class="singer fill" @scroll="handleScroll" ref="root">
    <div class="infosArea flex-row pl w-fill" >
      <WIcon :icon="singerDetail.cover" size="200"/>
      <div class="content mll flex-1 flex-col justify-between">
        <div class="title">{{ singerDetail.name }}</div>
        <div class="tags flex-row items-center">
          <div class="tag flex-row items-center mnr" v-for="item in singerDetail.basic.slice(0, 2)" :key="item.value">
            <div class="key">{{ item.key }}:</div>
            <div class="value">{{ item.value }}</div>
          </div>
        </div>
        <div class="fans text-info">粉丝数: {{ singerDetail.fans }}</div>
        <div class="ctrl flex-row">
          <div class="btn" @click="handlePlayAll">
            <WIcon icon="icon-play-all"/>
            播放全部
          </div>
          <div class="btn" @click="handleToggleLike">
            <ILike :like="isLike"/>{{isLike?"取消关注":"关注"}}
          </div>
        </div>
      </div>
    </div>
    <ul class="nav flex-row">
      <li @click="nav.activeLabel = item.label" v-for="item in nav.list" :key="item.label" :class="{active: item.label===nav.activeLabel}"><span>{{item.label}}{{item.count?item.count: ""}}</span></li>
    </ul>
    <div class="list" v-show="nav.activeLabel==='歌曲'">
      <ListDisplay ref="list"  :list="song.list"/>
    </div>
    <div class="list" v-show="nav.activeLabel==='专辑'">
      <AlbumUnit :size="200" v-for="item in album.list" :key="item.mid" :meta="item"/>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Prop, Vue} from "vue-property-decorator";
import {Path} from "@/ts.d/interfaces/Path";
import {qqMusicApi} from "@/network/qqmusic";
import WIcon from "@/components/icon/WIcon.vue";
import {SingerDetail} from "@/ts.d/classes/SingerDetail";
import {Song} from "@/ts.d/classes/Song";
import {Singer as ISinger} from "@/ts.d/classes/Singer";
import ILike from "@/components/icon/ILike.vue";
import ListDisplay from "@/components/listDisplay/ListDisplay.vue";
import {AlbumItem} from "@/ts.d/classes/AlbumItem";
import AlbumUnit from "@/components/albumUnit/AlbumUnit.vue";
import {Action, State} from "vuex-class";

@Component({
  components: {AlbumUnit, ListDisplay, ILike, WIcon}
})
export default class Singer extends Vue {
  @State("like") like!: {singer: ISinger[]}

  @Action("toggleLike")  toggleLike!: (payload: {type: "singer"; item: ISinger}) => void

  @Prop() path!: Path


  nav = {
    list: [{label: "歌曲", count: 0},
      {label: "专辑", count: 0},
      {label: "视频", count: 0},
      {label: "详情", count: 0},],
    activeLabel: "歌曲"
  }

  singerDetail = new SingerDetail()

  song: { list: Song[]; total: number; page: number; fetching: boolean } = {
    total: 0,
    page: 1,
    list: [],
    fetching: false,
  }
  album: { list: AlbumItem[]; total: number; page: number; fetching: boolean } = {
    total: 0,
    page: 1,
    list: [],
    fetching: false,
  }

  get isLike() {
    return this.like.singer.findIndex(i=> i.mid === this.path.mid) !== -1
  }

  handlePlayAll() {
    (this.$refs.list as any).handlePlay(0)
  }

  fetchSingerInfo() {
    qqMusicApi.getSingerInfo(this.singerDetail.mid).then((ret: any) => {
      this.singerDetail.basic = ret.data.basic.item
      this.singerDetail.desc = ret.data.desc
    })
  }

  handleScroll() {
    if((this.$refs.root as HTMLElement).offsetHeight + (this.$refs.root as HTMLElement).scrollTop > (this.$refs.root as HTMLElement).scrollHeight - 150){
      this.fetchSongList()
      this.fetchAlbumList()
    }
  }

  handleToggleLike() {
    this.toggleLike({type: "singer", item: new ISinger(this.path.singerName as string, this.path.mid as number)})
  }

  fetchSongList() {
    if (this.song.page > 1 && (this.song.list.length >= this.song.total || this.song.fetching)) {
      return
    }
    this.song.fetching = true
    qqMusicApi.getSingerHotSong(this.singerDetail.mid, this.song.page, 100).then((ret: any) => {
      this.singerDetail.fans = ret.data.singer.fans
      this.song.total = ret.data.total
      if(!this.nav.list[0].count) this.nav.list[0].count = this.song.total
      this.song.page++
      this.song.list = this.song.list.concat(ret.data.list.map((i: any) => ({
        ...i,
        mid: i.mid,
        singer: i.singer,
        name: i.name,
        albumMid: i.album.mid,
        albumName: i.album.name,
      })))
    }).finally(() => this.song.fetching = false)
  }

  fetchAlbumList() {
    if (this.album.page > 1 && (this.album.list.length >= this.album.total || this.album.fetching)) {
      return
    }
    this.album.fetching = true
    qqMusicApi.getSingerAlbum(this.singerDetail.mid, this.album.page, 100).then((ret: any) => {
      this.album.page++
      this.album.total = ret.data.total
      if(!this.nav.list[1].count) this.nav.list[1].count = this.album.total
      this.album.list = this.album.list.concat(ret.data.list.map((i: any)=>
          new AlbumItem(i.album_name, i.album_mid, i.singer, i.singer_name, i.listen_count)
      ))
      /*
      * {
        title: i.album_name,
        mid: i.album_mid,
        singer: i.singer,
        singerName: i.singer_name,
        listenCount: i.listen_count
      }*/
    }).finally(() => this.album.fetching = false)
  }

  mounted() {
    this.singerDetail.mid = this.path.mid as number
    this.singerDetail.name = this.path.singerName as string
    this.fetchSongList()
    this.fetchSingerInfo()
    this.fetchAlbumList()
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/css/var";

.singer {
  overflow: auto;

  .title {
    font-weight: 600;
    font-size: 30px;
  }

  .infosArea {
    height: 260px;

    .content {
      overflow: hidden;
    }
  }

  .listArea {
  }
}

.nav {
  li {
    padding: $pn $pl;
    margin-right: $mn;
    cursor: pointer;
  }

  .active {
    span {
      position: relative;
      color: $text-success;
    }

    span:after {
      content: "";
      width: 150%;
      height: 4px;
      background-color: white;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      border-radius: $border-radius-s;
      bottom: -6px;
    }
  }
}

.ctrl {
  .btn {
    cursor: pointer;
    text-align: center;
    padding: $pn 0;
    margin-right: $mn;
    width: 120px;
    background-color: #826ec9;
    border-radius: $border-radius-lx;

    &:hover {
      background-color: #6043c4;
    }
  }
}
</style>
